<template>
    <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(page,index) in iconGroup" :key="index">
             <div class="icons">
                <div class="icon" v-for="item in page" :key="item.id">
                    <img :src="item.imgUrl" :alt="item.desc">
                    <p class="textEllipsis">{{item.desc}}</p>
                </div>
            </div>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
</template>

<style scoped>
.icons{
    /* overflow: hidden;
    height: 0;
    padding-bottom: 50%;
    background-color: saddlebrown; */
}
.icon{
    width: 25%;
    display: inline-block;
    text-align: center;
    margin: .2rem 0rem;
}
.icon img{
    width: 60%;
    margin-bottom: .1rem;
}
</style>


<script>
export default {
    name:"home_icons",
    props:["navList"],
    data(){
        return{
            title:"图标导航",
            swiperOption: {
                pagination:".swiper-pagination"
                // some swiper options/callbacks
                // 所有的参数同 swiper 官方 api 参数
                // ...
            },
        }
    },
    computed:{
        iconGroup(){
            var group=[];
            this.navList.forEach((item,index)=>{
                var pages=Math.floor(index/8);
                if(!group[pages]){
                   group[pages]=[];
                }
                group[pages].push(item);
            })
            return group;
        }
    }
}
</script>
